<template>
  <div
    style="padding: 4px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 1px solid #e5e5e5;margin: 2px 0;">
    <el-form :ref="from+'Form'" label-width="0px">
      <el-form-item
        v-for="(obj, index) in parameterDataList"
        :key="index">
        <div v-if="Array.isArray(obj)">
          <page-add-params :from="from+'_'+index"
                           :data-list="obj||[]"
                           type="array"
                           :is-can-update="false"
                           @updateDataList="changeDataList"
          ></page-add-params>
        </div>
        <div v-if="!Array.isArray(obj)">
          <el-row style="margin-bottom: 8px;">
            <el-col :span="6">
              <div>
                <el-select size="small" v-model="obj.type" placeholder="请选择值类型">
                  <el-option v-for="(type,i) in typeList" :key="i"
                             :label="type.name"
                             :value="type.id"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="isCanUpdate?6:8">
              <div>
                <el-input size="small" v-model="obj.key"
                          placeholder="请输入key值" @blur="changeUpdate"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input v-if="obj.type == 'string'" size="small"
                          v-model="obj.value"
                          placeholder="请输入value值"
                          @blur="changeUpdate"></el-input>
                <page-add-params v-if="obj.type=='array'||obj.type=='object'"
                                 :from="from+'_'+index"
                                 :type="obj.type"
                                 :data-list="obj.list||[]"
                                 @updateDataList="changeDataList"
                ></page-add-params>
              </div>
            </el-col>
            <el-col :span="isCanUpdate?2:0">
              <div>
                <el-button size="small" icon="el-icon-delete"
                           @click.prevent="removeParameterDataObj(obj)">
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form-item>
      <el-button v-if="isCanUpdate" size="small" @click="addParameterDataObj">
        新增变量
      </el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "page-add-params",
    props: {
      from: {
        type: String,
        default() {
          return '';
        }
      },
      type: {
        type: String,
        default() {
          return '';
        }
      },
      dataList: {
        type: Array,
        default() {
          return [];
        }
      },
      isCanUpdate: {
        type: Boolean,
        default() {
          return true;
        }
      },
    },
    watch: {
      dataList: {
        handler(val, oldVal) {
          this.parameterDataList = val || [];
        }, immediate: true, deep: true,
      },
    },
    data() {
      return {
        parameterDataList: [],
        typeList: [
          {
            id: 'string',
            name: '字符串',
          },
          {
            id: 'array',
            name: '数组',
          },
          {
            id: 'object',
            name: '对象',
          },
        ],
      }
    },
    created() {
    },
    methods: {
      removeParameterDataObj(item) {
        let index = this.parameterDataList.indexOf(item)
        if (index !== -1) {
          this.parameterDataList.splice(index, 1)
        }
        this.$emit('updateDataList', {
          from: this.from,
          type: this.type,
          list: this.parameterDataList,
        });
      },
      addParameterDataObj() {
        this.parameterDataList.push({
          value: '',
          key: '',
          type: 'string',
          list: '',
        });
        this.$emit('updateDataList', {
          from: this.from,
          type: this.type,
          list: this.parameterDataList,
        });
      },
      changeUpdate() {
        this.$emit('updateDataList', {
          from: this.from,
          type: this.type,
          list: this.parameterDataList,
        });
      },
      changeDataList(params) {
        let from = params.from || '';
        let type = params.type || '';
        let list = params.list || '';
        let fromArr = from.split('_');
        let ind = fromArr.length >= 2 ? parseInt(fromArr[fromArr.length - 1])
          : -1;
        if (ind != -1) {
          this.parameterDataList[ind].list = list;
          let resArr = '';
          if (type =='array'){
            resArr = [];
            for (let i = 0; i < list.length; i++) {
              let tmp = {};
              tmp[list[i].key] = list[i].value;
              resArr.push(tmp);
            }
          }else{
            resArr = {};
            for (let i = 0; i < list.length; i++) {
              resArr[list[i].key] = list[i].value;
            }
          }

          this.parameterDataList[ind].value = resArr;
          this.$emit('updateDataList', {
            from: this.from,
            type: this.type,
            list: this.parameterDataList,
          });
        }
      },
    }
  }
</script>

<style scoped>

</style>
